<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import="java.util.ArrayList, edu.objects.Board, javax.jdo.*, edu.PMF, edu.objects.Player;" %>
<%
/**
* The game board page.
*/
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Game</title>
</head>
<body>

<%
PersistenceManager pm = PMF.get().getPersistenceManager();
Board board = pm.getObjectById(Board.class, "board");
out.print("<table border=1><tr bgcolor='#EBFF95'><td>PLAYER</td><td>SCORE</td></tr>");
for (Player p : board.getPlayerList()) {
	out.println("<tr><td>");
	out.println(p.getName());
	out.println("</td><td>");
	out.println(p.getScore());
	out.println("</td></tr>");
}
out.print("</table>");

if (request.getParameter("move") != null) {
	if (board.validateMove(request.getParameter("move")) !=-1) {
		out.print("<b>Thank you, good move!</b><p><p>");
	} else {
		out.print("<b>Invalid move :( </b><p><p>");
	}
} else {
	out.print(board);
}
pm.close();
%>

<p></p>TODO: YOUR player letters should be here:
<table><tr>
<td id="rack1" class="square">A<sub>1</sub></td>
<td id="rack2" class="square">J<sub>1</sub></td>
<td id="rack3" class="square">E<sub>1</sub></td>
<td id="rack4" class="square">S<sub>2</sub></td>
<td id="rack5" class="square"></td>
<td id="rack6" class="square"></td>
<td id="rack7" class="square"></td>
</tr></table><br>
Click the letter, then the destination.</br>

<form method="post">
<input type="hidden" id="tosend" name="move"></input>
<input type="submit" value="Submit" onclick="send()"/>
</form>
<script>//End of page code.
var lastid=""; // id of last clicked. All squares with id may be moved.
var squares = document.getElementsByClassName("square")
for (var i=0; i<squares.length; i++) {
    squares[i].addEventListener("click",function(e) {
        //alert(e.target.id);
        if (e.target.id != "") {
            if (lastid != "") {
                lastcontents = document.getElementById(lastid).innerHTML;
                document.getElementById(lastid).innerHTML = e.target.innerHTML;
                e.target.innerHTML = lastcontents;
                lastid = "";
            } else {
                lastid = e.target.id;
            }
        }
    },false);
}

function send() {
    var output = "";
    for (var r=0; r<15; r++) {
        for (var c=0; c<15; c++) {
            tile = document.getElementById(r+","+c);
            if (tile != null && tile.textContent != String.fromCharCode(160)) {
                output += tile.textContent.substr(0,1)+r+","+c+" ";
            }
        }
    }
    document.getElementById("tosend").value = (output);
}
</script>
</body>
</html>